{% extends "Base.html" %}
{% load static %}
{% block extracss %}
{% endblock %}
{% block pagetitle %} 主页{% endblock %}
{% block paget2 %}active{% endblock %}

<!--{% block page2 %}<span class="sr-only">(current)</span>{% endblock %}-->
{% block content %}
    <style>
        .card{
            cursor: default;
        }
        .card:hover{
            border-color: #ee3f4d;
            box-shadow:0 0 8px rgba(209, 26,45,0.8)
        }
    </style>
    <script>
        var pagenum = 1
        $(document).ready(function (){
            getmore()
        });
        $(window).scroll(function() {
            var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
            var positionValue = (scrollTop + windowHeight) - scrollHeight;
            if (positionValue >= -1) {
                getmore()
            }
        })
        function getmoviedetail(e){
            name = e.children[1].children[0].innerText
            showtime = e.children[1].children[1].innerText
            //addr= addr.slice(3)
            showtime = showtime.replaceAll('-','')
            window.location.href = window.location.href+name+"/"+showtime+"/"
        }
        function getmore(){
            //ajax获取电影数据
            var dataform = new FormData()
            dataform.append('pagenum',pagenum);
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                // dataType: "json",//预期服务器返回的数据类型
                url: "./movieget/" ,//url
                async:false,
                processData: false,
                contentType: false,    //contentType设置会导致后端错误
                // contentType: "multipart/form-data",
                data:dataform,
                success: function (result) {
                    //处理json数据
                    dealdata(result)
                    pagenum = pagenum +1
                },
                error : function(result) {
                    alert("网络错误")
                }
            });
        }
        function dealdata(jsondata){
            var userobj = eval('('+jsondata+')');
            for( i =0;i<12;i++){
                Text = '<div id = "vid_1" class="col-2" style="margin-top: 10px;"></div>'
                $("#movieList").append(Text)
                Text2 = '<div id = "vid_2" class="card" style="width: 11rem" onclick="getmoviedetail(this)"></div>'
                $("#vid_1").append(Text2)
                $("#vid_1").removeAttr("id")
                Text3 = '<img class="card-img-top" src="'+userobj[i][3]+'" alt="Card image cap">'
                $("#vid_2").append(Text3)
                Text4 = '<div id = "vid_3" class="card-body" style="background-color: #d1d9d9;"></div>'
                $("#vid_2").append(Text4)
                $("#vid_2").removeAttr("id")
                Text5 = '<h5 class="card-title" style="color: #f54748;">'+userobj[i][0]+'</h5>'
                Text6 = '<span>'+userobj[i][1]+'</span>'
                Text7 = '<p class="card-text"><strong>主演:</strong>'+userobj[i][2]+'</p>'
                $("#vid_3").append(Text5)
                $("#vid_3").append(Text6)
                $("#vid_3").append(Text7)
                $("#vid_3").removeAttr("id")
            }


        }
    </script>
<div class="container" style="background-color: white;">
    <!--选项栏-->
    <div class="container theme-showcase" role="main">
        <div class="s-filter">
            <dl class="s-filter-item">
                <dt class="type">排序</dt>
                <dd class="s-filter-item">
                    <b class="on">最近热映</b>
                    <a class="z">最近上映</a>
                    <a class="z">最受好评</a>
                </dd>

            </dl>
            <dl class="s-filter-item">
                <dt class="type">类型</dt>
                <dd class="s-filter-item">
                    <b class="on">全部</b>
                    <a class="z" href="#">喜剧</a>
                    <a class="z" href="#">爱情</a>
                    <a class="z" href="#">动作</a>
                    <a class="z" href="#">恐怖</a>
                    <a class="z" href="#">科幻</a>
                    <a class="z" href="#">剧情</a>
                    <a class="z" href="#">犯罪</a>
                    <a class="z" href="#">奇幻</a>
                    <a class="z" href="#">战争</a>
                    <a class="z" href="#">悬疑</a>
                    <a class="z" href="#">动画</a>
                    <a class="z" href="#">文艺</a>
                    <a class="z" href="#">记录</a>
                    <a class="z" href="#">传记</a>
                    <a class="z" href="#">歌舞</a>
                    <a class="z" href="#">古装</a>
                    <a class="z" href="#">历史</a>
                    <a class="z" href="#">惊悚</a>
                    <a class="z" href="#">伦理</a>
                    <a class="z" href="#">其他</a>

                </dd>

            </dl>
            <dl class="s-filter-item">
                <dt class="type">年代</dt>
                <dd class="s-filter-item">
                    <b class="on">全部</b>
                    <a class="z" href="#">2021</a>
                    <a class="z" href="#">2020</a>
                    <a class="z" href="#">2019</a>
                    <a class="z" href="#">2018</a>
                    <a class="z" href="#">2017</a>
                    <a class="z" href="#">2016</a>
                    <a class="z" href="#">2015</a>
                    <a class="z" href="#">2014</a>
                    <a class="z" href="#">2013</a>
                    <a class="z" href="#">2012</a>
                    <a class="z" href="#">2011</a>
                    <a class="z" href="#">2010</a>
                    <a class="z" href="#">2009</a>
                    <a class="z" href="#">2008</a>
                    <a class="z" href="#">2007</a>
                    <a class="z" href="#">更早</a>
                </dd>

            </dl>
            <dl class="s-filter-item">
                <dt class="type">地区</dt>
                <dd class="s-filter-item">
                    <b class="on">全部</b>
                    <a class="z" href="#">美国</a>
                    <a class="z" href="#">内地</a>
                    <a class="z" href="#">中国香港</a>
                    <a class="z" href="#">韩国</a>
                    <a class="z" href="#">日本</a>
                    <a class="z" href="#">法国</a>
                    <a class="z" href="#">英国</a>
                    <a class="z" href="#">德国</a>
                    <a class="z" href="#">中国台湾</a>
                    <a class="z" href="#">泰国</a>
                    <a class="z" href="#">印度</a>
                    <a class="z" href="#">其他</a>
                </dd>

            </dl>
            <dl class="s-filter-item">
                <dt class="type">明星</dt>
                <dd class="s-filter-item">
                    <b class="on">全部</b>
                    <a class="z" href="#">成龙</a>
                    <a class="z" href="#">周星驰</a>
                    <a class="z" href="#">李连杰</a>
                    <a class="z" href="#">林正英</a>
                    <a class="z" href="#">吴京</a>
                    <a class="z" href="#">徐峥</a>
                    <a class="z" href="#">黄渤</a>
                    <a class="z" href="#">王宝强</a>
                    <a class="z" href="#">李小龙</a>
                    <a class="z" href="#">张国荣</a>
                    <a class="z" href="#">洪金宝</a>
                    <a class="z" href="#">姜文</a>
                    <a class="z" href="#">范冰冰</a>
                    <a class="z" href="#">沈腾</a>
                    <a class="z" href="#">邓超</a>
                    <a class="z" href="#">巩俐</a>
                    <a class="z" href="#">马丽</a>
                    <a class="z" href="#">闫妮</a>
                    <a class="z" href="#">周冬雨</a>
                    <a class="z" href="#">刘昊然</a>
                    <a class="z" href="#">汤唯</a>
                    <a class="z" href="#">舒淇</a>
                    <a class="z" href="#">白百合</a>
                </dd>

            </dl>
        </div>

    </div>
    <!--电影列表-->
    <div class = "row" id = "movieList" style="margin-top: 10px;">





    </div>

    <!--选择动画框-->
{#    <div class="recommand">#}
{#        <div class="vid">#}
{#            <ul>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m1.jpg" %}"></a></li>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m2.jpg" %}"></a></li>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m3.jpg" %}"></a></li>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m4.jpg" %}"></a></li>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m5.jpg" %}"></a></li>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m6.jpg" %}"></a></li>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m7.jpg" %}"></a></li>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m8.jpg" %}"></a></li>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m9.jpg" %}"></a></li>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m10.jpg" %}"></a></li>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m11.jpg" %}"></a></li>#}
{#                <li><a href="#"><img class="h" src="{% static "imag/m12.jpg" %}"></a></li>#}
{#            </ul>#}
{#        </div>#}
{#    </div>#}
</div>


{% endblock %}